<script setup>
import { ref } from 'vue';
import OrderProcessControl from './OrderProcessControl.vue';
import OrderPermissionControl from './OrderPermissionControl.vue';

const activeTab = ref('process');

const handleTabChange = (tab) => {
  activeTab.value = tab.name;
};
</script>

<template>
  <div class="order-setting">
    <div class="top-tabs">
      <el-tabs v-model="activeTab" type="card" @tab-click="handleTabChange">
        <el-tab-pane label="流程设置" name="process"></el-tab-pane>
        <el-tab-pane label="权限设置" name="permission"></el-tab-pane>
      </el-tabs>
    </div>

    <div class="content-area">
      <OrderProcessControl v-if="activeTab === 'process'" />
      <OrderPermissionControl v-else-if="activeTab === 'permission'" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.order-setting {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: auto;
}

.top-tabs {
  border-bottom: 1px solid #eee;
  padding: 0 20px;

  /deep/ .el-tabs__header {
    margin: 0;
  }

  /deep/ .el-tabs__item {
    padding: 12px 20px;
    font-size: 14px;
  }

  /deep/ .el-tabs__item.is-active {
    color: #ff7d00;
    border-bottom: 2px solid #ff7d00;
  }
}

.content-area {
  padding: 20px;
  border: 15px solid #e9e6e6;
}
</style>